<template>
	<!-- <lay-row space="10" style="height: 600px; overflow-y: scroll;" ref="scrollContainer" @scroll="scrolling">
		<lay-col :md="colLen">
			<div class="eis-container">
				<div class="eis-form-steps">
					<div v-for="(item, index) in filterItems" :key="index" :class="`eis-form-step ${index == currentIndex ? 'eis-step-active' : ''}`">
						<div class="eis-step-head">
							<div class="eis-step-icon">
								<div class="step-icon-txt"></div>
							</div>
							<div class="eis-step-line" v-if="index + 1 != filterItems.length"></div>
						</div>
						<div class="eis-step-main" @click="scrollToAnchor($event, item, index)">{{ item.title }}</div>
					</div>
				</div>
				<div style="clear: both"></div>
			</div>
		</lay-col>
		<lay-col :md="24 - colLen">
			<div class="step-main">
				<div class="item" v-for="(item, index) in items" :key="index" :ref="(el) => setSwipeCellRef(el, item, index)">
					<div class="item-header" v-if="item.type">
						<span>{{ item.title }}</span>
					</div>
					<div class="item-content">
						<component :is="item.content" :ref="`childRef${item.key}`" v-if="isComponent(item.content)"></component>
						<div v-if="!isComponent(item.content)">{{ item.content }}</div>
					</div>
				</div>
			</div>
		</lay-col>
	</lay-row> -->
	
	<div class="step-main">
		<div class="solid radius-sm">
			<div class="flex align-center bg-gray cursor solid-bottom" style="padding: 15px" @click="openKeys1 = !openKeys1">
				<lay-icon :type="openKeys1 ? 'layui-icon-down' : 'layui-icon-right'" color="#999"></lay-icon>
				<span class="margin-left-sm">基本信息</span>
			</div>
			<div class="padding-lg" v-show="openKeys1">
				<div class="item" v-for="(item, index) in items" :key="index" :ref="(el) => setSwipeCellRef(el, item, index)">
					<div class="item-content" v-if="item.key === 'Info'">
						<component :is="item.content" :ref="`childRef${item.key}`" v-if="isComponent(item.content)"></component>
					</div>
				</div>
			</div>
			
			<div class="flex align-center bg-gray cursor" :class="{'solid-top': openKeys1, 'solid-bottom': openKeys2}" style="padding: 15px" @click="openKeys2 = !openKeys2">
				<lay-icon :type="openKeys2 ? 'layui-icon-down' : 'layui-icon-right'" color="#999"></lay-icon>
				<span class="margin-left-sm">高级设置</span>
			</div>
			<div class="padding-lg" v-show="openKeys2">
				<div class="item" v-for="(item, index) in items" :key="index" :ref="(el) => setSwipeCellRef(el, item, index)">
					<div class="item-header" v-if="item.type && item.key !== 'Info'">
						<span>{{ item.title }}</span>
					</div>
					<div class="item-content" v-if="item.type && item.key !== 'Info'">
						<component :is="item.content" :ref="`childRef${item.key}`" v-if="isComponent(item.content)"></component>
					</div>
				</div>
			</div>
		</div>
		
		<div class="item" v-for="(item, index) in items" :key="index" :ref="(el) => setSwipeCellRef(el, item, index)">
			<div class="item-content" v-if="item.key === 'description'">
				<component :is="item.content" :ref="`childRef${item.key}`" v-if="isComponent(item.content)"></component>
			</div>
		</div>
	</div>
</template>

<script setup>
	import { ref, reactive, computed } from 'vue';
	const emit = defineEmits(['toggleClick']);

	const props = defineProps({
		//布局列
		colLen: {
			type: Number,
			default: 3,
		},
		//显示列
		items: {
			type: Array,
			default: [],
			required: true,
		},
	});
	const filterItems = computed(() => {
		return props.items.filter(item => item.type)
	})

	const openKeys1 = ref(true)
	const openKeys2 = ref(false)
	
	const scrollContainer = ref(null);

	// ref数组
	const swipeCellRefList = ref([]);

	// 动态设置ref
	const setSwipeCellRef = (el, item, index) => {
		if (el) {
			swipeCellRefList.value[index] = el;
		}
	};

	const scrolling = () => {
		swipeCellRefList.value.forEach((el, index) => {
			const rect = el.getBoundingClientRect();
			const containerRect = scrollContainer.value.$el.getBoundingClientRect();
			//rect.bottom - containerRect.top - containerRect.height < 0
			if (rect.top <= containerRect.top) {
				if (filterItems.value.length > index) currentIndex.value = index;
			}
		});
	};

	const currentIndex = ref(0);
	// 定义一个方法来动态跳转到指定的锚点
	const scrollToAnchor = (e, anchor, index) => {
		const anchorElement = swipeCellRefList.value[index];
		if (anchorElement) {
			anchorElement.scrollIntoView({ behavior: 'smooth' });
			// currentIndex.value = index;
			// emit('toggleClick', e, anchor, index);
		}
	};

	//判断是否是组件
	const isComponent = (candidate) => {
		return typeof candidate === 'object' && candidate !== null &&
			(typeof candidate.setup === 'function' || typeof candidate.render === 'function' || typeof candidate.template === 'string' || typeof candidate.components === 'object');
	};
</script>

<style lang="scss" scoped>
	//步骤样式
	.eis-container {
		position: fixed;

		.eis-form-steps {
			overflow: hidden;
			padding: 0;
			font-size: 0;
			position: relative;
			/*width: 150px;*/
			float: left;

			.eis-form-step {
				text-align: left;
				height: 80px;

				.eis-step-head {
					float: left;
					height: 100%;
					position: relative;

					.eis-step-icon {
						width: 16px;
						height: 16px;
						font-size: 8px;
						border-radius: 50%;
						position: relative;
						z-index: 1;
						cursor: pointer;

						.step-icon-txt {
							width: 12px;
							height: 12px;
							background: #dddddd;
							border: 1px solid #dddddd;
							-webkit-border-radius: 50%;
							-moz-border-radius: 50%;
							border-radius: 50%;
							text-align: center;
							line-height: 12px;
							color: #fff;
							position: absolute;
							top: 0;
							left: 0;
							right: 0;
							bottom: 0;
							margin: auto;
						}
					}

					.eis-step-line {
						position: absolute;
						background-color: #f1f1f1;
						width: 2px;
						height: 100%;
						top: 15px;
						left: 8px;
					}
				}

				.eis-step-main {
					overflow: hidden;
					padding: 0px 10px;
					font-size: 14px;
					color: #666;
					text-align: left;
					line-height: 16px;
					cursor: pointer;
				}
			}

			.eis-step-active {
				.eis-step-head {
					.eis-step-icon {
						border: 1px solid #4995fa;

						.step-icon-txt {
							background: #4995fa;
							border: 1px solid #4995fa;
						}
					}
				}

				.eis-step-main {
					color: #3197fd;
				}
			}
		}
	}

	.eis-container:before,
	.eis-container:after {
		clear: both;
	}

	// Content styles
	.step-main {
		.item {
			.item-header {
				height: 35px;
				background: #eef9ff;
				line-height: 35px;
				padding: 0px 15px;
				border-radius: 3px;

				span {
					border-left: 3px solid #2590ff;
					font-weight: 900;
					padding: 0 6px;
				}
			}

			.item-content {
				padding: 10px 0;
			}
		}
	}
</style>